<template>
  <div>
    <headers :head_title="head_title" />
    <main>
      <div class="box_head">
        <img :src="doctordata.imagePic" />
        <div>
          <ul class="uls">
            <p>
              <span class="box_name">{{ doctordata.doctorName }}</span><span class="sst">{{ doctordata.jobTitle
                }}</span>
              <van-icon size="55" color="red" name="like-o" v-if="flag" @click="dian" />
              <van-icon size="55" color="red" name="like" background="red" v-else @click="qu" />
            </p>
            <li class="cct">{{ doctordata.inauguralHospital }}</li>
            <li class="ccx">
              <span>好评率</span><span>{{ doctordata.praise }}</span><span>服务患者数</span><span>{{
                doctordata.servicePrice }}</span>
            </li>
            <li><span class="ccs"></span>他收到的礼物</li>
            <li>
              <div class="jk">
                <div v-for="item in doctordatas" :key="index">
                  <img :src="item.giftPic" alt="">
                  <div class="wen">{{ item.worth }}</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="details_main">
        <div class="box_intro">
          <p><span class="details_css"></span>个人简介</p>
          <div class="details_text">
            {{ doctordata.personalProfile }}
          </div>
        </div>

        <div class="box_intro">
          <p><span class="details_css"></span>擅长领域</p>
          <div class="details_text">
            {{ doctordata.goodField }}
          </div>
        </div>
      </div>
      <div class="box_intro">
        <p><span class="details_css"></span>用户评价<span>
            <div v-for="item in doctorlist" :key="item.id">
              <div class="lik">
                <img :src="item.headPic" alt="" class="image">
                <div class="ak">
                  {{ item.nickName }}
                </div>
              </div>
              <div class="title">
                {{ item.content }}
              </div>
            </div>
            <div @click="tiao(doctorId)" class="cha">点击查看更多评论</div>
          </span></p>
      </div>
    </main>
    <div class="footer">
      <div class="fei">
        {{ doctordata.servicePrice }}H币/次
      </div>
      <button @click="zi" class="btn">立即咨询</button>
    </div>
  </div>

</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import headers from '@/components/header.vue'
import { ref } from 'vue';
import axios from 'axios';
import router from '@/router';
import { id } from 'element-plus/es/locales.mjs';
const userId = localStorage.getItem('userId')
const sessionId = JSON.parse(localStorage.getItem('sessionId')||'{}')
const userdata=ref({
  // doctorId:doctorId,

})
const flag = ref(true);
const dian = () => {
  flag.value = !flag.value
  axios.post(`/health/user/inquiry/verify/v1/followDoctor`,{
    doctorId:doctorId
  },
    {
      headers: {
        userId: userId,
        sessionId: sessionId,
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then((res)=>{
      console.log(res);
    })
}
const qu=()=>{
  flag.value = !flag.value
  axios.delete(`/health/user/inquiry/verify/v1/cancelFollow?doctorId=${doctorId}`,
    {
      headers: {
        userId: userId,
        sessionId: sessionId,
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then((res)=>{
      console.log(res);
    })
}
const head_title = '医生详情';
const doctordata = ref([]);
const doctordatas = ref([]);
const doctorlist = ref([]);
const route = useRoute();
const doctorId = route.params.doctorId;
const tiao = (doctorId) => {
  router.push({ name: 'yspj', params: { doctorId: doctorId } })
}
const zi = () => {
  router.push({ path: '/chat_service' })
}
const getlist = () => {
  axios.get(`/health/user/inquiry/v1/findDoctorInfo?doctorId=` + doctorId).then((res) => {
    console.log(res.data.result);
    doctordata.value = res.data.result;
    doctordatas.value = res.data.result.doctorReceiveGiftList;
    doctorlist.value = res.data.result.commentList;
    console.log(res.data.result.doctorReceiveGiftList)
  })
}
getlist()
</script>

<style scoped lang="scss">
.btn {
  width: 120px;
  height: 40px;
  background: blue;
  border: none;
  color: #fff;
  font-size: 16px;
}

.fei {
  width: 280px;
  background: #ffff;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
}

.footer {
  width: 100%;
  height: 40px;
  display: flex;
  border-top: 2px solid #eee;
}

.cha {
  text-align: center;
  font-size: 14px;
  color: blue;
}

.title {
  margin-left: 5px;
  font-size: 14px;
}

.ak {
  width: 100px;
  height: 50px;
  line-height: 55px;
  margin-left: 10px;
  font-size: 13px;
}

.lik {
  display: flex;
}

.image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-top: 5px;
}

.wen {
  text-align: center;
}

.jk {
  display: flex;
}

main {
  width: 90%; // 90% * 0.5
  margin: 12.5px auto; // 25px * 0.5
}

.box_head {
  width: 95%; // 95% * 0.5
  height: 50%;
  background: #fff;
  display: flex;
}

.box_intro {
  margin: 5px 0; // 10px * 0.5
}

.box_head>img {
  width: 150px; // 300px * 0.5
  height: 175px; // 350px * 0.5
  margin-right: 17.5px; // 35px * 0.5
  border: #ccc 0.5px solid; // 1px * 0.5
}

.uls>li {
  margin: 7.5px; // 15px * 0.5
  /* font-size: 24px; */
}

.uls>li img {
  width: 42.5px; // 85px * 0.5
}

.box_name {
  font-size: 17.5px; // 35px * 0.5
  margin: 12.5px;
  margin-left: 0;
}

.sst {
  font-size: 10px; // 20px * 0.5
  margin-right: 6px; // 12px * 0.5
}

.ccx>span {
  margin-right: 7.5px; // 15px * 0.5
}

.details_css {
  /* font-size: 34px; */
  margin-right: 5px; // 10px * 0.5
  border-left: 3px solid #368beb; // 6px * 0.5
}

.details_text {
  // font-size: initial;
  font-size: 20px; // 15px * 0.5
}
</style>
